<template>
	<view style="width: 100%; height:808rpx;">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	// 或者按需引入 
	import * as echarts from 'echarts/core';
	import {
		LineChart,
		BarChart,
		CandlestickChart
	} from 'echarts/charts';
	import {
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LegendComponent,
		// ToolboxComponent,
		BrushComponent,
		VisualMapComponent,
		DataZoomComponent,
		MarkLineComponent
	} from 'echarts/components';
	// 标签自动布局，全局过渡动画等特性
	import {
		LabelLayout,
		UniversalTransition
	} from 'echarts/features';
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
	import {
		CanvasRenderer
	} from 'echarts/renderers';

	// 注册必须的组件
	echarts.use([
		LegendComponent,
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		// ToolboxComponent,
		BrushComponent,
		VisualMapComponent,
		DataZoomComponent,
		MarkLineComponent,
		LineChart,
		BarChart,
		CandlestickChart,
		LabelLayout,
		UniversalTransition,
		CanvasRenderer,
	]);
	const upColor = '#0bb563';
	const downColor = '#f33b50';
	//-------------------------------------
	export default {
		props: {
			kData: {
				type: Object,
				default: () => ({})
			},
			nowprice: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {

			};
		},
		mounted() {
			// 把 echarts 传入 
			this.$refs.chart.init(echarts, chart => {
				var data = this.splitData(this.kData);
				const currPrice = this.nowprice
				console.log('currPrice',currPrice);
				chart.setOption({
					animation: false,
					legend: {
						padding: 0,
						top: -20
					},
					tooltip: {
						trigger: "item",
						showDelay: false,
						enterable: true,
						axisPointer: {
							type: "cross"
						},
						position: function(t, e, a, n, i) {
							return [0, 0]
						},
						// extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
					},
					 brush: {
					        xAxisIndex: 'all',
					        brushLink: 'all',
					        outOfBrush: {
					          colorAlpha: 0.1
					        }
					      },
					      visualMap: {
					        show: false,
					        seriesIndex: 5,
					        dimension: 2,
					        pieces: [
					          {
					            value: 1,
					            color: downColor
					          },
					          {
					            value: -1,
					            color: upColor
					          }
					        ]
					      },
					axisPointer: {
						link: [{
							xAxisIndex: 'all'
						}],
						label: {
							backgroundColor: '#777'
						}
					},
					 grid: [
						{
						  left: '10%',
						  right: '8%',
						  height: '50%'
						},
						{
						  left: '10%',
						  right: '8%',
						  top: '63%',
						  height: '16%'
						}
					  ],
					xAxis: [{
							type: 'category',
							data: data.categoryData,
							boundaryGap: false,
							axisTick: {
								show: false
							},
							axisPointer: {
								show: true
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: "solid",
								}
							}
						},
						{
							type: 'category',
							gridIndex: 1,
							data: data.categoryData,
							boundaryGap: false,
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisPointer: {
								type: "shadow",
								label: {
									show: false
								},
								triggerTooltip: true,
								handle: {
									show: true,
									margin: 20,
									color: "#B80C00"
								}
							}
						}
					],
					yAxis: [{
							scale: true,
							splitNumber: 2,
							position: "right",
							axisLine: {
								lineStyle: {
									color: "#777"
								}
							},
							splitLine: {
								show: true
							},
							axisTick: {
								show: true
							},
							axisLabel: {
								inside: false,
								margin: 5,
								formatter: "{value}\n"
							},
							// max: function (value) {
							//       // value.max 是数据中的最大值
							//     return value.max + 0.5; // 自动增加 5（可以调整为 5 到 10 的逻辑）
							// },
						},
						{
							scale: true,
							gridIndex: 1,
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							}
						}
					],
					dataZoom: [
						{
							type: "slider",
							xAxisIndex: [0, 1],
							realtime: !0,
							start: 85,
							end: 100,
							top: 0,
							height: 14,
							handleIcon: "path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
							handleSize: "100%"
						},
						{
							type: "inside",
							xAxisIndex: [0, 1],
							start: 85,
							end: 100,
							top: 30,
							height: 20
						}
					],
					series: [{
							// name: 'Dow-Jones index',
							type: 'candlestick',
							data: data.values,
							itemStyle: {
								color: upColor,
								color0: downColor,
								borderColor: upColor,
								borderColor0: downColor
							},
							// markPoint: {
							// 	symbol: "circle",
							// 	symbolSize: 0.1,
							// 	label: {
							// 		show: true,
							// 		position: "inside",
							// 		color: "#fff"
							// 	},
							// 	data: []
							// },
							emphasis: {
								itemStyle: {
									color: "black",
									color0: "#444",
									borderColor: "black",
									borderColor0: "#444"
								}
							},
							markLine: {
								symbol: ['none', 'none'], // 不显示标线端点的箭头
								data: [ 
									{
										name: 'Y 轴值为 100 的水平线',
										yAxis: currPrice,
										label: {
											show: true,
											formatter: function(t) {
												var e = t.value;
												return e
											},
											position: "insideEndTop",
											padding: [6, 8],
											backgroundColor: downColor,
											color: "#fff",
											borderRadius: 4
										},
										lineStyle: {
											color: downColor,
											type: "dashed"
										}
									},
								],
							},
						},
						// {
						// 	name: 'MA5',
						// 	type: 'line',
						// 	data: this.calculateMA(5, data),
						// 	smooth: true,
						// 	showSymbol: false,
						// 	lineStyle: {
						// 		opacity: 0.5
						// 	}
						// },
						// {
						// 	name: 'MA10',
						// 	type: 'line',
						// 	data: this.calculateMA(10, data),
						// 	smooth: true,
						// 	showSymbol: false,
						// 	lineStyle: {
						// 		opacity: 0.5
						// 	}
						// },
						// {
						// 	name: 'MA20',
						// 	type: 'line',
						// 	data: this.calculateMA(20, data),
						// 	smooth: true,
						// 	showSymbol: false,
						// 	lineStyle: {
						// 		opacity: 0.5
						// 	}
						// },
						// {
						// 	name: 'MA30',
						// 	type: 'line',
						// 	data: this.calculateMA(30, data),
						// 	smooth: true,
						// 	showSymbol: false,
						// 	lineStyle: {
						// 		opacity: 0.5
						// 	}
						// },
						{
							name: 'Volume',
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data.volumes,
							itemStyle: {
								color: function (params) {
								  var colorList;
								  if (params.data[2] == -1) {
								    colorList = upColor;
								  } else {
								    colorList = downColor;
								  }
								  return colorList;
								},
							}
						}
					]
				});
			});
		},
		methods: {
			splitData(rawData) {
				let categoryData = [];
				let values = [];
				let volumes = [];
				for (let i = 0; i < rawData.length; i++) {
					categoryData.push(rawData[i].splice(0, 1)[0]);
					values.push(rawData[i]);
					volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
				}
				return {
					categoryData: categoryData,
					values: values,
					volumes: volumes
				};
			},
			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.values.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data.values[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(3));
				}
				return result;
			}
		}
	}
</script>

<style>
</style>